<!doctype html>
<!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="前端,HTML,css,css3,javascript,jquery">
<meta name="description" content="用CSS和jquery制作标签（tab）切换效果">
<meta name="author" content="Lisa Chen">
<link rel="shortcut icon" href="images/favicon.ico">
<title>tab切换</title>
<link href="../css/public.css" rel="stylesheet">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/page.css" rel="stylesheet">
<link href="../highlight/styles/github.css" rel="stylesheet">
</head>
<body>
<!--[if  IE 6]> 
<div id="ie6-warning">
	您正在使用IE6或以IE6为内核的浏览器，可能导致本网站无法正常显示，建议您升级到更高版本。<a href="http://www.microsoft.com/china/windows/internet-explorer/"
		target="_blank">点击下载</a><a id="ie6-close href="javascript:void(0)"">关闭</a>
</div>
<script>
	$body=$('body');
	$body.addClass('ie6');
	$('#ie6-close').click(function(){
		$body.removeClass('ie6');
		$('#ie6-warning').hide();
	})
</script>
<![endif]-->
<nav class="topNav"><!--页头--></nav>
<div class="wrapper-box inner">
	<h1 class="article-Title">标签（Tab）切换的实现方法</h1>
	<h2>普通切换-内容全部加载（安排顺序对应）</h2>
	<div class="tab tab-default module">
		<ul class="tab-nav hd">
			<li class="cur">标签1</li>
			<li>标签2</li>
		</ul>
		<ul class="tab-content module-bd">
			<li class="tab-panel cur">
				111...
			</li>
			<li class="tab-panel">
				222...
			</li>
		</ul>
	</div><!--/module-->
	<h4>HTML:</h4>
	<pre><code>&lt;div class=&quot;tab module&quot;&gt;
	&lt;ul class=&quot;tab-nav hd&quot;&gt;
		&lt;li class=&quot;cur&quot;&gt;标签1&lt;/li&gt;
		&lt;li&gt;标签2&lt;/li&gt;
	&lt;/ul&gt;
	&lt;ul class=&quot;tab-content module-bd&quot;&gt;
		&lt;li class=&quot;tab-panel cur&quot;&gt;
			111...
		&lt;/li&gt;
		&lt;li class=&quot;tab-panel&quot;&gt;
			222...
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
	<h4>CSS:</h4>
	<pre><code>.tab-nav {
	position: relative;
	overflow: hidden;
}
.tab-nav li {
	float: left;
	border:1px solid #eee;
	border-bottom:none;
	margin-right:8px;
	padding:0 20px;
	line-height:30px;
	font-size:14px;
	cursor:pointer;
}
.tab-nav .cur{
	background-color:#FAFAFA;
}
.tab-content{
	margin-top: -1px;
	border:1px solid #eee;
	background-color:#FAFAFA;
	height:100px;
}
.tab-content .tab-panel{
	display:none;
}
.tab-content .cur {
	display:block;
}</code></pre>
	<h4>Jquery:</h4>
	<pre><code>$('.tab-nav li').click(function() {
	var _this=$(this),
		s=_this.index(),
		$pane=_this.parents('.tab').first().find('.tab-panel').eq(s);
	a_s_r(_this,'cur');
	a_s_r($pane,'cur');
});
function a_s_r(o,c){
	o.addClass(c).siblings().removeClass(c);	
}
</code></pre>
	<dl class="explain">
		<dt><h3>注：</h3></dt>
		<dd>如果想鼠标经过切换，将jquery中的click事件换成hover事件。</dd>
		<dd>如果切换的内容是用js动态处理的，就不能使用<span class="hljs-attribute">display</span>:<span class="hljs-value">none</span>，可以换成<span class="hljs-attribute">visibility</span>:<span class="hljs-value">hidden</span>。</dd>
	</dl>
	<hr>
	<h2>普通切换-内容全部加载（更具ID对应）</h2>
	<h4>HTML:</h4>
	<pre><code>&lt;div class=&quot;tab module&quot;&gt;
	&lt;ul class=&quot;tab-nav module-hd&quot;&gt;
		&lt;li class=&quot;cur&quot;&gt;&lt;a href=&quot;#tab01&quot;&gt;标签一&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#tab02&quot;&gt;标签二&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;ul class=&quot;tab-content module-bd&quot;&gt;
		&lt;li class=&quot;tab-panel cur&quot; id=&quot;tab01&quot;&gt;
			111...
		&lt;/li&gt;
		&lt;li class=&quot;tab-panel&quot; id=&quot;tab02&quot;&gt;
			222...
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
	<h4>Jquery:</h4>
	<pre><code>$(".tab-nav li").click(function() {
	var	_this=$(this),
		$pane=$(_this.find('a').attr('href'));
	a_s_r(_this,'cur');
	a_s_r($pane,'cur');
});
function a_s_r(o,c){
	o.addClass(c).siblings().removeClass(c);	
}</code></pre>
	<hr>
	<h2>只有标签切换-内容动态加载</h2>
	<div class="tab tab-default module">
		<div class="module-hd">
			<ul class="tab-nav">
				<li class="cur"><a href="javascript:void(0)">标签一</a></li>
				<li><a href="javascript:void(0)">标签二</a></li>
			</ul>
		</div>
		<div class="module-bd"> 
			内容...
		</div>
	</div><!--/module-->
	<h4>HTML:</h4>
	<pre><code>&lt;div class=&quot;tab module&quot;&gt;
	&lt;div class=&quot;module-hd&quot;&gt;
		&lt;ul class=&quot;tab-nav&quot;&gt;
			&lt;li class=&quot;cur&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;标签一&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;标签二&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
	&lt;div class=&quot;module-bd&quot;&gt; 
		内容...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
	<h4>Jquery:</h4>
	<pre><code>$(".tab-nav li").click(function() {
	var	_this=$(this);
	a_s_r(_this,'cur');
})
function a_s_r(o,c){
	o.addClass(c).siblings().removeClass(c);	
}</code></pre>
	<h2>菱形TAB</h2>
	<div class="tab tab-rhombus module">
		<div class="module-hd">
			<ul class="tab-nav">
				<li class="first cur"><a href="javascript:void(0)">标签1<em class="al"></em><em class="ar"></em></a></li>
				<li><a href="javascript:void(0)">标签标签标签<em class="al"></em><em class="ar"></em></a></li>
				<li><a href="javascript:void(0)">标签标签<em class="al"></em><em class="ar"></em></a></li>
			</ul>
		</div>
		<div class="module-bd">
			...
		</div>
	</div><!--/module-->
	<footer class="footer"><!--页尾--></footer>
</div>
<!----------------         弹出框 结束          ------------------->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/myscript.js"></script>
<script src="../highlight/highlight.pack.js"></script>
<script>
 hljs.initHighlightingOnLoad('html','css');
</script>
</body>
</html>
